import React, {Component} from 'react';
import {Table, Popconfirm, Button} from 'antd';
import EditTableCell from './EditTableCell';
import EditTableCss from '../../css/EditTable.css';
import BaseUrl from "../../common/BaseUrl";
import fetch from "isomorphic-fetch";
import gameStore from '../../stores/GameStore'

class EditTable extends Component {
    constructor(props) {
        super(props);
        this.columns = [{
            title: 'id',
            dataIndex: 'id',
            width: '25%',
            key: 'id',
            render: (text, record, index) => this.renderColumns(this.state.data, index, 'id', text),
        }, {
            title: '游戏名称',
            dataIndex: 'gameName',
            width: '30%',
            render: (text, record, index) => this.renderColumns(this.state.data, index, 'gameName', text),
        }, {
            title: '游戏类型',
            dataIndex: 'gameType',
            width: '20%',
            render: (text, record, index) => this.renderColumns(this.state.data, index, 'gameType', text),
        }, {
            title: 'operation',
            dataIndex: 'operation',
            /*render: (text, record, index) => {
                const {editTable} = this.state.data[index].name;
                return (
                    <div>
                        {
                            editTable ?
                                <span>
                                    <a style={{marginRight: '8px'}}
                                       onClick={() => this.editDone(index, 'save')}>Save</a>
                                    <Popconfirm title="Sure to cancel" onConfirm={() => this.editDone(index, 'cancel')}>
                                        <a>Cancel</a>
                                    </Popconfirm>
                                </span>
                                :
                                <span>
                                    <a onClick={() => this.edit(index)}>Edit</a>
                                </span>
                        }
                    </div>
                );
            }*/
            render: (text, record) => (
                <span>
                    <Button onClick={() => this.goUpdateGameInfo(event, text, record)}>修改</Button>
                </span>
            ),
        }];
        this.state = {
            data: []
        };
        this.constructorGameTable = this.constructorGameTable.bind(this);
    }

    /*componentDidMount() {
        let formData = new FormData();
        formData.append("pageNumber", 1);
        formData.append("pageSize", 10);
        this.constructorGameTable(formData);
    }*/

    constructorGameTable(formData) {
        let url = BaseUrl + 'react/gameInfo/getGameInfo';
        fetch(url, {
            method: 'post',
            body: formData,
            headers: {
                'Accept': 'application/json'
            },
            credential: 'same-origin'
        }).then(res => res.json()).then(json => {
            let pagination = this.props.pagination;
            pagination.total = json.total;
            pagination.current = json.pageNumber;
            //let data = this.constructorGameTableInfoJson(json.gameInfoList);
            let data = json.gameInfoList;
            this.setState({
                data: data,
                pagination: pagination
            });
        }).catch(err => {
            console.log(err);
        })
    }

    /*constructorGameTableInfoJson(gameInfoList) {
        let jsonArray = [];
        let json;
        let name;
        let type;
        let i = 0;
        for (let a of gameInfoList) {
            json = {};
            name = {};
            type = {};
            name.value = a.gameName;
            name.editTable = false;
            json.name = name;
            type.value = a.gameType;
            type.editTable = false;
            json.type = type;
            json.id = a.id;
            json.key = i;
            i++;
            jsonArray.push(json);
        }
        return jsonArray;
    }*/

    renderColumns(data, index, key, text) {
        const {editTable, status} = data[index][key];
        if (typeof editTable === 'undefined') {
            return text;
        }
        return (
            <EditTableCell editTable={editTable} value={text} status={status}
                           onChange={value => this.handleChange(key, index, value)}/>
        );
    }


    handleChange(key, index, value) {
        const {data} = this.state;
        data[index][key].value = value;
        this.setState({
            data: data
        });
        console.log("handleChange");
    }

    edit(index) {
        const {data} = this.state;
        Object.keys(data[index]).forEach((item) => {
            if (typeof data[index][item].editTable !== 'undefined') {
                data[index][item].editTable = true;
            }
        });
        this.setState({
            data: data
        });
    }

    editDone(index, type) {
        const {data} = this.state;
        Object.keys(data[index]).forEach((item) => {
            if (data[index][item] && typeof data[index][item].editTable !== 'undefined') {
                data[index][item].editTable = false;
                data[index][item].status = type;
            }
        });
        this.setState({data}, () => {
            Object.keys(data[index]).forEach((item) => {
                if (data[index][item] && data[index][item].editTable !== 'undefined') {
                    delete data[index][item].status;
                }
            })
        });
    }

    goUpdateGameInfo(e, text, record) {
        e.preventDefault();
        let title = "修改游戏信息";
        let gameName = record.gameName;
        let gameType = record.gameType;
        let gameId = record.id;
        let type = false;
        this.props.changeModalVisible(title, type, gameId, gameName, gameType);
    }


    render() {
        return (
            <Table rowKey="id" dataSource={this.props.data} columns={this.columns} pagination={this.props.pagination}
                   rowSelection={this.props.rowSelection} onChange={this.props.onChange}/>
        );
    }
}

export default EditTable;